<script setup>
import { ref, onMounted, toRefs, watch } from 'vue'
// *需要自定义的引入*
// 自定义选择器
import diylist from '@/views/diy/diymobile.index.vue'
import productlist from '@/views/diy/product-list.index.vue'
// import articlelist from '@/views/article/article-list.index.vue'
// import wxmini from '@/views/config/wxmini-list.index.vue'
// import diyproduct from '@/views/config/diyproduct.vue'
// import { queueGoodslist } from '@/js/getlist.js';

const props = defineProps({
    title: String,
    size: {
        type: String,
        default: 'small'
    },
    config: {
        type: Object,
        default: {
            type: '',
            link: '',
            name: '',
            url: ''
        }
    },
    notcover: {
        type: Boolean,
        default: false
    }
});
//需要响应式时使用toRefs
const { config } = toRefs(props);
//向父级传递消息
const emits = defineEmits(['tohost'])
function sindEmit(msg) {
    emits('tohost', msg);
}
onMounted(() => {
})
//监听变化
// watch(() => props.config, (newVal, oldValue) => {
//     if (newVal) {
//         //find()
//     }
// })

//初始配置
const defaultConfig = ref(JSON.parse(JSON.stringify(props.config)))
//初始类型
const configtype=ref(defaultConfig.value.type);

const selectList = ref([
    { label: '自定义链接', value: 'web' },
    { label: '专题', value: 'diy' },
    { label: '内容', value: 'article' },
    { label: '商品', value: 'product' },
    { label: '页面路径', value: 'mini' },
    { label: '商品分类', value: 'productClass' },
    { label: '商品列表', value: 'productList' }
])

function onChange(val) {
    // // config.value.type = val;
    if (val == 'web') {
        if(!config.value.url){
            config.value.url = defaultConfig.value.url;
        }
        dialogWeb.value = true;
    } else if (val == 'diy') {
        dialogDiy.value = true;
    } else if (val == 'product') {
        dialogProduct.value = true;
    } else if (val == 'productClass') {
        // getClass()
        dialogClass.value = true;
    } else if (val == 'article') {
        dialogArticle.value = true;
    } else if (val == 'mini') {
        dialogMini.value = true;
    } else if (val == 'productList') {
        dialogProList.value = true;
    }
}

function onClear() {
    config.value.type = "";
}

const dialogWeb = ref(false)
function onWeb(type) {
    config.value.type = type ? configtype.value : (defaultConfig.value.type || config.value.type);
    configtype.value = config.value.type;
    dialogWeb.value = false;
}

// 选择出的专题
const dialogDiy = ref(false)
function onDiy(item) {
    config.value.type = configtype.value;
    config.value.link = item.id;
    config.value.name = item.name;
    config.value.url = item.thumbnail || '';
    dialogDiy.value = false;
}

// 选择的文章
const dialogArticle = ref(false)
function onArticle(item) {
    config.value.type = configtype.value;
    config.value.link = item.id;
    config.value.name = item.title;
    !props.notcover && (config.value.url = item.coverImage);
    dialogArticle.value = false;
}
// 选择出的商品
const dialogProduct = ref(false)
function onProduct(item) {
    config.value.type = configtype.value;
    config.value.link = item.id;
    config.value.name = item.name;
    !props.notcover && (config.value.url = item.thumbnail);
    dialogProduct.value = false;
}

// 选择出的分类
const dialogClass = ref(false)
function onCategory(item) {
    config.value.type = configtype.value;
    config.value.name = item.categoryName;
    !props.notcover && (config.value.url = item.icon);
    config.value.link = item.id;
    dialogClass.value = false;
}

// const classData = ref([])
// function getClass() {
//     queueGoodslist().then((data) => {
//         classData.value = data;
//     })
// }


// 选择出的微信路径
const dialogMini = ref(false)
function onWxmini(item) {
    config.value.type = configtype.value;
    config.value.link = item.path;
    config.value.name = item.name;
    item.appid && (config.value.appid = item.appid);
    config.value.pc_path = item.pc_path;
    dialogMini.value = false;
}

// 商品列表配置
const dialogProList = ref(false)
function onProList(item) {
    config.value.type = configtype.value;
    config.value.link = item.link;
    config.value.name = item.name;
    !props.notcover && (config.value.url = item.url);
    dialogProList.value = false;
}


</script>
<template>
    <div style="text-align: left">
        <el-select v-model="configtype" :size="size" placeholder="选择类型" :style="{width: size=='small'?'90px':'140px'}" clearable @clear="onClear">
            <el-option v-for="item in selectList" :key="item.value" :label="item.label" :value="item.value"
                @click="onChange(item.value)" />
        </el-select>


        <!-- 配置弹窗 链接 -->
        <el-dialog v-model="dialogWeb" title="配置链接" @close="onWeb(false)">
            <el-input type="text" v-model="config.url" placeholder="图片地址">
                <template #prepend>图片地址</template>
            </el-input>
            <el-input type="text" v-model="config.link" placeholder="链接地址">
                <template #prepend>链接地址</template>
            </el-input>
            <el-input type="text" v-model="config.name" placeholder="标题">
                <template #prepend>标 题</template>
            </el-input>
            <template #footer>
                <el-button type="primary" @click="onWeb(true)" title="type将转为web">保存为自定义类型</el-button>
                <el-button type="primary" plain @click="onWeb(false)" title="仅修改面板属性">保持原有类型</el-button>
            </template>
        </el-dialog>

        <el-dialog v-model="dialogArticle" title="选择文章" top="2vh">
            <div style="height: 88vh;overflow: auto;">
                <!-- <articlelist :xuanze="true" @tohost="onArticle" /> -->
            </div>
        </el-dialog>

        <el-dialog v-model="dialogProduct" title="选择商品" top="2vh">
            <div style="height: 88vh;overflow: auto;">
                <productlist :xuanze="true" @tohost="onProduct" />
            </div>
        </el-dialog>

        <el-dialog v-model="dialogDiy" title="选择专题" top="2vh">
            <div style="height: 88vh;overflow: auto;">
                <diylist :xuanze="true" @tohost="onDiy" />
            </div>
        </el-dialog>

        <el-dialog v-model="dialogMini" title="页面链接" top="2vh">
            <div style="height: 88vh;overflow: auto;">
                <!-- <wxmini :xuanze="true" @tohost="onWxmini" /> -->
            </div>
        </el-dialog>

        <el-dialog v-model="dialogProList" title="选择商品列表">
            <!-- <diyproduct @tohost="onProList" /> -->
        </el-dialog>

        <!-- 商品分类选择窗 -->
        <el-dialog v-model="dialogClass" title="选择分类" top="2vh">
            <div style="height: 88vh;overflow: auto;">
                <!-- <el-table class="mytable" :data="classData" size="default" style="width: 100%">
                    <el-table-column prop="categoryName" label="分类名称" />
                    <el-table-column label="封面图">
                        <template #default="scope">
                            <img :src="scope.row.icon" style="height: 50px">
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" width="180">
                        <template #default="scope">
                            <el-button size="small" type="warning" @click="onCategory(scope.row)">选择</el-button>
                        </template>
                    </el-table-column>
                </el-table> -->
            </div>
        </el-dialog>

    </div>
</template>
<style scoped>
.class-list li{
    width: 100%;line-height: 2;font-size: 16px;cursor: pointer;
    padding: 5px 10px; border-bottom: #e5e5e5 1px solid;
}
.class-list li:hover{background-color: #d3edff;}
.class-list li img{height: 70px;display: block;margin-right: 20px;}
</style>